<template>
    <h1>资源列表</h1>

    <div v-if="resourceList.length > 0">
        <div v-for="resource in resourceList" :key="resource.id" @click="goToProductPage(resource)">
            <div>
                {{ resource.resourceName }}
            </div>
        </div>
    </div>
    <div v-else>
        <DelayedDisplay>
            <p>未搜索到任何资源</p>
        </DelayedDisplay>
    </div>
</template>

<script setup lang="ts">
import { Resource } from '@/model/resource';
import { defineEmits } from 'vue';

const props = defineProps<{
    resourceList: Resource[];
}>();

const emit = defineEmits<{
    (e: 'select', id: number): void
}>()

const goToProductPage = (resource: Resource) => {
    emit('select', resource.id)  // 向父组件发送事件
};


</script>